<div class="row">
	<div class="col-lg-4 col-sm-6 col-xs-12">
		<div class="databox databox-lg radius-bordered databox-shadowed databox-graded">
			<div style="padding:15px;border-radius: 50%;width:18%;margin:2% 0 0 10px;background-color:#2dc3e8;float:left;">
				<a href="#">
					<img src="__PUBLIC__/Cms/img/hy.png" width="100%">
				</a>
			</div>
			<!--<div style="border:1px solid;width:70%;float:left;"><p>使用：{$ordertotal}</p></div>-->
			<!--<div class="databox-left bg-azure">
				<div class="databox-piechart">
					<div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="{$newviptotalrate}" data-animate="500" data-linewidth="3" data-size="60" data-trackcolor="#7fe2fa"><span class="white font-90">{$newviptotalrate}%</span>
					</div>
				</div>
			</div>-->
			<div class="databox-right" style="width:78%;float:left;">
				<span class="databox-number azure">用户：&nbsp;&nbsp;{$viptotal}人</span>
				<!--<div class="databox-text darkgray">新增用户</div>-->
				<!--<div class="databox-stat bg-azure radius-bordered">
					<div class="stat-text">环比：{$newviprate}%</div>
					<gt name="newviprate" value="0">
					<i class="stat-icon fa fa-arrow-up"></i>
					<else/>
					<i class="stat-icon fa fa-arrow-down"></i>
					</gt>
				</div>-->
			</div>
		</div>
		<div class="databox databox-xlg radius-bordered databox-shadowed databox-vertical">
			<div class="databox-top bg-blue">
				<span class="databox-header">用户分布【总数：{$viptotal}人】</span>
			</div>
			<div class="databox-bottom bg-white no-padding" style=" height: 230px;">
				<div id="vip-chart" class="chart chart"></div>
			</div>
		</div>
	</div>
	<div class="col-lg-4 col-sm-6 col-xs-12">
		<div class="databox databox-lg radius-bordered databox-shadowed databox-graded">
			<div style="padding:15px;border-radius: 50%;width:18%;margin:2% 0 0 10px;background-color:#fb6e52;float:left;">
				<a href="#">
					<img src="__PUBLIC__/Cms/img/gouwu.png" width="100%">
				</a>
			</div>
			<!--<div class="databox-left bg-orange">
				<div class="databox-piechart">
					<div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="{$newordertotalrate}" data-animate="500" data-linewidth="3" data-size="60" data-trackcolor="#fa8872"><span class="white font-90">{$newordertotalrate}%</span>
					</div>
				</div>
			</div>-->
			<div class="databox-right" style="width:78%;float:left;">
				<span class="databox-number azure">使用：&nbsp;&nbsp;{$ordertotal}</span>
				<!--<div class="databox-text darkgray">新增使用</div>-->
				<!--<div class="databox-stat bg-orange radius-bordered">
					<div class="stat-text">环比：{$neworderrate}%</div>
					<gt name="neworderrate" value="0">
					<i class="stat-icon fa fa-arrow-up"></i>
					<else/>
					<i class="stat-icon fa fa-arrow-down"></i>
					</gt>
				</div>-->
			</div>
		</div>
		<div class="databox databox-xlg radius-bordered databox-shadowed databox-vertical">
			<div class="databox-top bg-orange">
				<span class="databox-header">使用分布【总数：{$ordertotal}个】</span>
			</div>
			<div class="databox-bottom bg-white no-padding" style=" height: 230px;">
				<div id="order-chart" class="chart chart"></div>
			</div>
		</div>
	</div>
	<!--<div class="col-lg-4 col-sm-6 col-xs-12">
		<div class="databox databox-lg radius-bordered databox-shadowed databox-graded">
			<div style="padding:15px;border-radius: 50%;width:17%;margin:2% 0 0 10px;background-color:#a0d468;float:left;">
				<a href="#" >
					<img src="__PUBLIC__/Cms/img/fxs.png" width="100%">
				</a>
			</div>
			<!--<div class="databox-left bg-palegreen">
				<div class="databox-piechart">
					<div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="{$yjtotalrate}" data-animate="500" data-linewidth="3" data-size="60" data-trackcolor="#aadc95"><span class="white font-90">{$yjtotalrate}%</span>
					</div>
				</div>
			</div>-->
			<!--<div class="databox-right" style="width:78%;float:left;">
				<span class="databox-number azure">分销商：&nbsp;&nbsp;{$fxstotal}</span>
				<!--<div class="databox-text darkgray">新增佣金</div>-->
				<!--<div class="databox-stat bg-palegreen radius-bordered">
					<div class="stat-text">环比：{$yjrate}%</div>
					<gt name="yjrate" value="0">
					<i class="stat-icon fa fa-arrow-up"></i>
					<else/>
					<i class="stat-icon fa fa-arrow-down"></i>
					</gt>
				</div>-->
			<!--</div>
		</div>
		<div class="databox databox-xlg radius-bordered databox-shadowed databox-vertical">
			<div class="databox-top bg-palegreen">
				<span class="databox-header">分销商分布【有效总数：{$fxstotal}人】</span>
			</div>
			<div class="databox-bottom bg-white no-padding" style=" height: 230px;">
				<div id="fx-chart" class="chart chart"></div>
			</div>
		</div>
	</div>-->
</div>

<!--面包屑导航封装-->
<div id="tmpbread" style="display: none;">{$breadhtml}</div>
<script type="text/javascript">
	setBread($('#tmpbread').html());
</script>
<!--/面包屑导航封装-->
<!--图表特性封装-->
<script type="text/javascript">
	InitiateEasyPieChart.init();
</script>
<!--图表逻辑-->
<script type="text/javascript">
 			themeprimary = getThemeColorFromCss('themeprimary');
            themesecondary = getThemeColorFromCss('themesecondary');
            themethirdcolor = getThemeColorFromCss('themethirdcolor');
            themefourthcolor = getThemeColorFromCss('themefourthcolor');
            themefifthcolor = getThemeColorFromCss('themefifthcolor');
            themesixthcolor = '#AC193D';
            themeseventhcolor = '#001940';
    
    function labelFormatter(label, series) {
        return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
    }     
	//用户
	var vip1="{$vipsub}";//已关注
	var vip2="{$vipdissub}";//未关注
	var vipwrap = $("#vip-chart");
	var vipdata = [
            	{ label: "正常", data: [[1, vip1]], color: themefifthcolor },
            	{ label: "已冻结", data: [[1, vip2]], color: themeprimary }
     ];
     
      $.plot(vipwrap, vipdata, {
                    series: {
                        pie: {
                            show: true,
                            radius: 1,
                            tilt: 0.5,
                            label: {
                                show: true,
                                radius: 1,
                                formatter: labelFormatter,
                                background: {
                                    opacity: 0.8
                                }
                            },
                            combine: {
                                color: "#999",
                                threshold: 0.1
                            }
                        }
                    },
                    legend: {
                        show: false
                    }
       });
    //使用分布
    var order0="{$order0}";//未使用
	var order1="{$order1}";//已使用
	var order2="{$order2}";//已过期
	
	var orderwrap = $("#order-chart");
	var orderdata = [
            	{ label: "未使用", data: [[1, order0]], color: themeprimary },
            	{ label: "已使用", data: [[1, order1]], color: themethirdcolor },
            	{ label: "已过期", data: [[1, order2]], color: themefourthcolor }
     ];
     
      $.plot(orderwrap, orderdata, {
                    series: {
                        pie: {
                            show: true,
                            radius: 1,
                            tilt: 0.5,
                            label: {
                                show: true,
                                radius: 1,
                                formatter: labelFormatter,
                                background: {
                                    opacity: 0.8
                                }
                            },
                            combine: {
                                color: "#999",
                                threshold: 0.1
                            }
                        }
                    },
                    legend: {
                        show: false
                    }
       });
      
      
</script>